class Drawable {
    active: bool;
    ctx: CanvasRenderingContext2D;
    x: number;
    y: number;

    constructor(ctx:CanvasRenderingContext2D,x:number,y:number) {
        this.active = false;

        this.ctx = ctx;
        this.x = x;
        this.y = y;
    }

    //Draw method
    Draw() {}

    // click eventhandler 
    // return true, if this is the clicked Drawable)
    Click(x:number,y:number):bool {
        return false;
    }
};

class Corner extends Drawable {
    private radius:number;
    private squeres: Squere[];

    constructor(ctx:CanvasRenderingContext2D,x: number,y: number,radius:number) {
        super(ctx, x, y);
        this.radius = radius;
        this.squeres = new Squere[];
    }
    
    public Draw() {
        var startPoint = (Math.PI/180)*0;
        var endPoint = (Math.PI/180)*360;
        
        this.ctx.beginPath();
        // context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        this.ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI,false);
        this.ctx.fillStyle = this.active ? "rgb(255, 0, 0)" : "rgb(0, 255, 0)";
        this.ctx.fill();
        this.ctx.closePath();
    }

    public AddSquere(squere:Squere) {
        this.squeres.push(squere);
    }

    public Click(x,y) {
        if(this.active)
            return false;

        if (Math.abs(x - this.x) <= (this.radius * 2) &&  Math.abs(y - this.y) <= (this.radius * 2)) {
            this.active = true;
            this.squeres.forEach(function (corner) {
                corner.CornerChecked();
            });
            return true;
        }

        return false;
    }
}

class Squere extends Drawable{
    private cornersChecked: number;
    private width: number;

    constructor(ctx:CanvasRenderingContext2D,x: number,y: number,width:number) {
        super(ctx, x, y);
        this.cornersChecked = 0;
        this.width = width;
    }

    public CornerChecked() {
        this.cornersChecked++;
        if (this.cornersChecked == 4) {
            createsoundbite();
            this.active = true;
            this.Draw();
        }
    }
    public Draw() {
        var steps = 30, i = 0,_this = this;

        var interval = setInterval(function() {
            _this.ctx.fillStyle = 'rgba(255,0,0,'+i/steps+')';
            _this.ctx.fillRect(_this.x,_this.y,_this.width,_this.width); 
            i++;
            if(i === steps) {
                clearInterval(interval);
            }
        }, 30);
    }
}

class Game {
    ctx:CanvasRenderingContext2D;
    corners:Corner[][];
    LeftOffset: number;
    TopOffset: number;
    Width: number;

    constructor(canvas: HTMLElement) {
        this.ctx = (<HTMLCanvasElement>canvas).getContext('2d');
        this.LeftOffset = findPos(canvas)[0];
        this.TopOffset = findPos(canvas)[1];
        this.Width = canvas.clientWidth;
    }
    public Init(n:number) {
        this.ctx.clearRect(0,0,this.ctx.canvas.clientWidth,this.ctx.canvas.clientWidth);
        this.corners = new Corner[][];
        
        var distance = this.Width / (n+1);
        var radius = distance / 6;
      
        for (var i = 0; i < n; i++) {
            this.corners[i] = new Corner[];
            for (var j = 0; j < n; j++) {
                this.corners[i][j] = new Corner(this.ctx, i * distance + distance, j *distance + distance, radius);
                if (i > 0 && j > 0) {
                    var sq = new Squere(this.ctx,(i-1)*distance + distance,(j-1)*distance+distance,distance);
                    this.corners[i - 1][j - 1].AddSquere(sq);
                    this.corners[i][j - 1].AddSquere(sq);
                    this.corners[i - 1][j].AddSquere(sq);
                    this.corners[i][j].AddSquere(sq);
                }
            }
        }
    }
    public Draw() {
        this.corners.forEach(function (row) {
            row.forEach(function (corner){
                corner.Draw();
            });
        });
    }
    public Click(e:MouseEvent) {
        var click_X = e.pageX - this.LeftOffset;
        var click_Y = e.pageY - this.TopOffset;
        
        this.corners.forEach(function (row) {
            row.forEach(function (corner) {
                corner.Click(click_X,click_Y);
            });
        });

        this.Draw();
    }
}

function findPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return [curleft, curtop];
    }
}

var canvas = document.getElementById('gameCanvas');
var game = new Game(canvas);
game.Init(10);
game.Draw();
canvas.addEventListener("click", function (e) { game.Click(<MouseEvent>e)}, true);
var bgmusic = new Audio();
bgmusic.src = "/Content/theme-x-stephen_burns.mp3";
bgmusic.loop = true;
bgmusic.play();

function createsoundbite(){
    var html5audio = new Audio();
    html5audio.setAttribute('src', '/Content/laser.mp3');
    html5audio.play();
    delete html5audio;
}

function ToggleMusic() {
    if (bgmusic.paused == false) {
        bgmusic.pause();
        document.getElementById('sound_icon').style.background = 'url(/Content/sound_off.png)';
    } else {
        bgmusic.play();
        document.getElementById('sound_icon').style.background = 'url(/Content/sound_on.png)';
    }
}